import { memo } from 'react'
import { Link, useNavigate } from 'react-router-dom'
import styles from './index.module.scss'
// import { useRequest } from 'ahooks'
// import { getUserInfo } from '@/service/module/user'
import { UserOutlined } from '@ant-design/icons'
import { Space, Button, message } from 'antd'
import { getToken, removeToken } from '@/utils/user-token'
import { useDispatch } from 'react-redux'
import useGetUserInfo from '@/hooks/useGetUserInfo'
import { logoutAction } from '@/store/features/user'
import { LOGIN_PATHNAME } from '@/router'

const UserInfo = memo(() => {
  // const { data } = useRequest(getUserInfo)
  // const { username, nickname } = data || {}

  const { username, nickname } = useGetUserInfo()
  const nav = useNavigate()
  const dispatch = useDispatch()
  const token = getToken()

  //退出登录
  const logout = () => {
    dispatch(logoutAction()) //清空了redux用户信息
    removeToken()
    message.success('退出登录成功')
    setTimeout(() => {
      nav('/login')
    }, 500)
  }

  const UserInfo = (
    <>
      <span style={{ color: '#e8e8e8' }}>
        <Space>
          <UserOutlined />
          <span>{nickname}</span>
          <Button type="link" onClick={logout}>
            退出
          </Button>
        </Space>
      </span>
    </>
  )

  const login = (
    <Link to={LOGIN_PATHNAME}>
      <span className={styles.login}>登录</span>
    </Link>
  )
  return <>{username && token ? UserInfo : login}</>
})

export default UserInfo
